<template>
    <div>

        <Button type="primary" @click="create.isOpen = !create.isOpen">创建</Button>

        <Modal
                title="创建维修单"
                v-model="create.isOpen"

        >
            <create @submit-ok="ok"></create>
            <div slot="footer"></div>
        </Modal>
        <pageTable
                request-url="/api/order/page"
                :columns="columns"
                :transform="mapData"
                v-model="tableData"
                :request-param="{orderStatus}"
                searchable
                ref="table"

        >
            <Select placeholder="订单状态" v-model="orderStatus" clearable style="width:200px" slot="search">
                <Option v-for="(v,k) in statusMap" :value="k" :key="v">{{ v }}</Option>
            </Select>
        </pageTable>
        <detail v-model="detail.isOpen" :data="detail.curRow"></detail>
        <Modal
                title="选择解决方案"
                v-model="advice.isOpen"
        >
            <h2 v-if="this.advice.list.length === 0" style="text-align: center">
                暂时还没有工程师提出建议和报价
            </h2>
            <div v-else>
                <Table highlight-row ref="currentRowTable" :columns="advice.columns" :data="advice.list">
                </Table>
                <Button type="primary" style="margin-top: 15px" @click="submitAdvice">提交</Button>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script type="text/jsx">
    import {accpetOrder, choiceRepairAdvice, rejectOrder, viewAdviceByOrderId} from "@/api"
    import pageTable from "_c/page-table/page-table";
    import detail from "_c/order-detail/order-detail";
    import create from "_c/order-create/order-create";

    export default {
        name: "order-view",
        components: {
            pageTable, detail, create
        },
        mounted() {
        },
        data() {
            return {
                create: {
                    isOpen: false
                },
                columns: [
                    {title: "维修单号", key: "id"},
                    {title: "设备编号", key: "deviceId", width: 200},
                    {title: "设备名称", key: "name", width: 200},
                    {title: "设备分类", key: "type", width: 200},
                    {title: "创建时间", key: "createTime", width: 200, sortable: true},
                    {
                        title: "订单状态",
                        notSearch: true,
                        render: (h, {row}) => {
                            return (
                                <Badge
                                    status={this.badgeStatus(row.orderStatus)}
                                    text={row.statusStr}
                                />
                            );
                        }
                    },
                    {
                        title: "操作",
                        notSearch: true,
                        render: (h, {row, index}) => {
                            if (row.orderStatus === 0) {
                                return (
                                    <div>
                                        <Button type="primary" size="small" style="margin: 5px"
                                                on-click={this.showDetail.bind(this, row)}>查看详情</Button>
                                        <Button type="warning" size="small" style="margin: 5px"
                                                on-click={this.selectEng.bind(this, row)}>解决方案</Button>
                                        <Poptip
                                            confirm
                                            title="你确定要撤销维修?"
                                            on-on-ok={this.remove.bind(this, row, index)}
                                        >
                                            <Button type="error" size="small" style="margin: 5px">撤销维修</Button>
                                        </Poptip>
                                    </div>
                                );
                            } else if (row.orderStatus === 2) {
                                return (
                                    <div>
                                        <Button type="primary" size="small" style="margin: 5px"
                                                on-click={this.showDetail.bind(this, row)}>查看详情</Button>
                                        <Poptip
                                            confirm
                                            title="维修已完成?"
                                            on-on-ok={this.comfirm.bind(this, row, index)}
                                        >
                                            <Button type="error" size="small" style="margin: 5px">确认维修</Button>
                                        </Poptip>
                                    </div>
                                );
                            } else {
                                return <Button type="primary" size="small" style="margin: 5px"
                                               on-click={this.showDetail.bind(this, row)}>查看详情</Button>
                            }
                        }
                    }
                ],
                detail: {
                    isOpen: false,
                    curRow: null
                },
                advice: {
                    isOpen: false,
                    list: [],
                    columns: [
                        {
                            title: '选中',
                            align: 'center',
                            key: 'checkBox',
                            render: (h, params) => {
                                return h('div', [
                                    h('Checkbox', {
                                        props: {
                                            value: params.row.checkBox
                                        },
                                        on: {
                                            'on-change': (e) => {
                                                this.advice.list.forEach((items) => {
                                                    this.$set(items, 'checkBox', false)
                                                });
                                                this.advice.list[params.index].checkBox = e;
                                                this.advice.curRow = params.row
                                            }
                                        }
                                    })
                                ])
                            }
                        },
                        {title: "工程师id", key: "engineerId"},
                        {title: "维修方案", key: "repairInfo"},
                        {title: "维修价格(元)", key: "cost"},
                    ],
                    curRow: null
                },
                orderStatus: null,
                tableData: [],
                statusMap: {
                    0: "维修申请中",
                    1: "设备维修中",
                    2: "完成确认中",
                    3: "维修完成",
                    4: "订单撤销"
                }
            };
        },
        methods: {
            comfirm(row) {

                accpetOrder(row.id).then(d => {
                    if (d && d.meta && d.meta.isSuccess) {
                        this.$Message.success("确认完成")
                        this.$refs['table'].getTableData()
                    } else {
                        this.$Message.error("错误:", d.meta.msg)
                    }

                })
            },
            ok() {
                this.create.isOpen = !this.create.isOpen
                this.$refs['table'].getTableData()
            },
            submitAdvice() {
                //valid row
                let len = this.advice.list.filter((items) => items.checkBox).length;
                if (!len) {
                    this.$Message.error("请选择一项方案!");
                    return;
                }
                const {id, orderId} = this.advice.curRow
                choiceRepairAdvice({orderId, adviceId: id}).then(res => {
                    if (res && res.meta && res.meta.isSuccess) {
                        this.$Message.success("选择成功，请等待上门维修!")
                        this.advice.isOpen = !this.advice.isOpen
                        this.$refs['table'].getTableData()
                    } else {
                        this.$Message.error(res.meta.msg)
                    }
                })
            },
            showDetail(row) {
                this.detail.isOpen = !this.detail.isOpen
                this.detail.curRow = row
            },
            selectEng(row) {
                this.advice.isOpen = !this.advice.isOpen
                this.advice.curRow = null
                viewAdviceByOrderId(row.id).then(res => {
                    let data = res.data || {}
                    this.advice.list = data.advice || []
                })
            },
            remove(row, index) {
                rejectOrder(row.id).then(d => {
                    if (d.meta && d.meta.isSuccess) {
                        this.$Message.success("撤销成功")
                        this.$refs['table'].getTableData()
                    } else {
                        this.$Message.error("撤销失败" + d.meta.msg)
                    }
                })
            },
            mapData(item) {

                return {
                    ...item,
                    statusStr: this.statusMap[item.orderStatus] || "未知状态"
                }
            },

            badgeStatus(status) {
                let sMap = {
                    0: "processing",
                    1: "processing",
                    2: "processing",
                    3: "success",
                    4: "default"
                };
                return sMap[status] || "error";
            }
        },
        computed: {}
    };
</script>

